<!-- 修改考勤周期弹出框 -->
<template>
  <a-modal
    width="80%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    draggable
    title-align="center"
  >
    <template #title>
      <div>修改考勤周期</div>
    </template>
    <main>
      <header style="margin-bottom: 30px">
        <h3>风险提示:</h3>
        <a-space direction="vertical">
          <div>
            1、修改后可能出现排班信息丢失、系统异常、历史考勤月报表内考勤周期显示错误等多种问题，请慎重操作，建议您先备份好数据，确定后再行修改；
          </div>
          <div>
            2、修改后将无法倒退回历史考勤月，且系统将自动调整当前考勤月的开始、结束时间，这会影响到您的考勤和计薪统计，甚至可能需要贵公司线下考勤计薪；
          </div>
        </a-space>
      </header>

      <section>
        <a-space direction="vertical">
          <div>考勤周期:</div>
          <a-select
            :style="{ width: '320px' }"
            placeholder="请选择日期"
            v-model="formData"
          >
            <a-option v-for="item in 30" :key="item" :value="item"
              >从{{ item }}日开始</a-option
            >
          </a-select>
        </a-space>
      </section>
    </main>

    <template #footer>
      <footer>
        <a-checkbox :value="true" v-model="isSure"
          ><span style="color: red"
            >我已清楚并愿意承担修改计薪周期带来的风险</span
          ></a-checkbox
        >
        <a-space>
          <a-button @click="handleCancel">放弃修改</a-button>
          <a-button @click="handleOk" type="primary" :disabled="!isSure"
            >确认修改</a-button
          >
        </a-space>
      </footer>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible', 'modifyDate']);

const formData: any = ref(1);

let isSure = ref(false); // 是否确实风险

// 表单校验
const rules = {
  name: [
    {
      required: true,
      message: '请输入假期名称'
    }
  ]
};

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      isSure.value = false;
      //
    }
  }
);
// 获取表单数据
const getData = () => {
  try {
    //
  } catch (error: unknown) {
    console.log(error);
  }
};

// 保存
const handleOk = async () => {
  emit('update:visible', false);
  emit('modifyDate', formData.value);
};

// 取消
const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<style scoped lang="less">
footer {
  display: flex;
  justify-content: space-between;
}
</style>
